<template>
  <div>
    <el-card>
      <div slot="header">
        <span>京东商品统计</span>
      </div>
      <el-row>
        <el-col :span="12">
          <div id="left"
               style="width: 600px;height:400px;"></div>
        </el-col>
        <el-col :span="12">
          <div id="right"
               style="width: 600px;height:400px;"></div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Dashboard',

  data () {
    return {
      numList:[],
      isInLike: [],
      likeName:[],
      likeDesc:[],
      favoriateList:[],
    };
  },

  mounted () {
    this.getLeftData();
    this.getRightData();
  },

  methods: {
    getLeftData () {
      this.$axios.get('/buyList').then(res => {
        if (res.status == 200) {
          //获取课程列表成功
          res.data.forEach(item => {
            this.isInLike.push(item.favoriate)
          })
          res.data.forEach(item => {
            this.likeDesc.push(item.desc)
          })
          var myChart = this.$echarts.init(document.getElementById('left'));
          // 绘制图表
          myChart.setOption({
            title: {
              text: '收藏人数'
            },
            tooltip: {},
            xAxis: {
              data: this.likeDesc
            },
            yAxis: {},
            series: [
              {
                name: '销量',
                type: 'bar',
                data: this.isInLike
              }
            ]
          });
        } else {

        }
      }).catch(err => {
        console.log(err);
      })
    },
    getRightData () {
      this.$axios.get('/buyList').then(res => {
        if (res.status == 200) {
          //获取课程列表成功
          res.data.forEach(item => {
            this.favoriateList.push({
              name:item.desc,
              value:item.favoriate,
            })
          })
          var myChart = this.$echarts.init(document.getElementById('right'));
          let option = {
            title: {
              text: 'Referer of a Website',
              subtext: 'Fake Data',
              left: 'center'
            },
            tooltip: {
              trigger: 'itema'
            },
            legend: {
              orient: 'vertical',
              left: 'left'
            },
            series: [
              {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: this.favoriateList,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          }
          // 绘制图表
          myChart.setOption(option);
        } else {

        }
      }).catch(err => {
        console.log(err);
      })
    }
  },
};
</script>

<style lang="scss" scoped>
</style>